<template>
  <div class="about">
    <!-- <h2>这是list页面</h2> -->
    <div class="list">
      <li v-for="item in list" :key="item.goodsId">
        <!-- 
            路由传参  (导航跳转/路由跳转 -> 携带一些数据)

            1. query传参
              a. query传参(参数数据队列 -> 本质也是通过hash值模拟的)  
                a.  路由地址之后用?分隔传入参数数据队列(手搓版)
                b.  给to参数动态绑定对象
                :to="{path:'/detail',name:'detail',query:{gid:item.goodsId,a:1,b:2,c:3}}"
                

              b. 参数解析 
              this.$route.query  => {xxx} 

            2. params传参 (动态路径参数) => 将参数拼接在路径中传入
              a. 在路由配置中设置动态路径参数 
                  路由中的设置路径: path: '/detailcopy/:gid/:a/:b',


              b. 在导航跳转/路由跳转时传入数据  => 对应动态路径参数(将参数也在url路径中存储)
                 1. url跳转路径(传入实际值 => 手搓版): /detailcopy/A001/1/2
                 2. to动态绑定对象时  =>  params传参,to动态绑定对象时, path属性不能和params同时使用,此时params属性不生效,不会将参数作为路径拼接到url之后, 建议使用name和params {name,params}

              c. Vue-router会对应路径解析得到数据.存储到$route的params对象中 => {gid:"A001",a:1,b:2}

         -->
        <!-- query传参 -->
        <!-- <router-link :to="'/detail?gid='+item.goodsId+'&a=1&b=2&c=3'">
          <img :src="item.goodsImg" alt="">
          <p class="name">{{ item.goodsName }}</p>
          <p class="price">{{ item.goodsPrice }}</p>
        </router-link> -->

        <!-- to方法动态传入对象   => Vue-router解析过程中自动绑我们拼接-->
        <router-link :to="{path:'/detail',name:'detail',query:{gid:item.goodsId,a:1,b:2,c:3}}">
          <img :src="item.goodsImg" alt="">
          <p class="name">{{ item.goodsName }}</p>
          <p class="price">{{ item.goodsPrice }}</p>
        </router-link>


        <!-- <a @click.prevent="$router.push({path:'/detail',name:'detail',query:{gid:item.goodsId,a:1,b:2,c:3}})">
          <img :src="item.goodsImg" alt="">
          <p class="name">{{ item.goodsName }}</p>
          <p class="price">{{ item.goodsPrice }}</p>
        </a> -->

        <!--                  params传参(动态路径参数)           -->
        <!-- <router-link :to="'/detailcopy/'+item.goodsId+'/1/2'">
          <img :src="item.goodsImg" alt="">
          <p class="name">{{ item.goodsName }}</p>
          <p class="price">{{ item.goodsPrice }}</p>
        </router-link>  -->

        <!-- 注意: 
            params传参,to动态绑定对象时, path属性不能和params同时使用,此时params属性不生效,不会将参数作为路径拼接到url之后
            建议使用name和params {name,params}
         -->
        <!-- <router-link :to="{name:'detailcopy',params:{gid:item.goodsId,a:1,b:2}}">
          <img :src="item.goodsImg" alt="">
          <p class="name">{{ item.goodsName }}</p>
          <p class="price">{{ item.goodsPrice }}</p>
        </router-link>  -->


      </li>
    </div>
  </div>
</template>

<script>
// @是/src的别名 => 从src目录下开始查找
// http://121.43.116.41/demo/php/searchAllGoods.php


export default {
  name: 'ListView',
  data(){
    return {
      list:[],
    }
  },
  methods:{
    getGoodsList(){
      this.$axios.get("http://121.43.116.41/demo/php/searchAllGoods.php").then(response=>response.data).then(res=>{
          var {status,message,list} = res;
          console.log("list",list);
          if(status){
            this.list = list;
          }else{
            alert(message);
          }
      })
    }
  },
  mounted(){
    this.getGoodsList();
  }

}
</script>

<style scoped>
  .list {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .list > li {
     width: 48%;
     box-sizing: border-box;
     padding: 0.05rem;
  }

  .list > li img{
    width: 80%;
    display: block;
    margin: 0.2rem;
  }

  .list > li .name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
